import React, { Component } from 'react';
import { withRouter, NavLink } from 'react-router-dom';
import { Menu, Breadcrumb, Progress } from 'antd';
import axios from './../../axios';
import Utils from './../../utils/utils';
import './style.less';

class Aside extends Component {
	
	state = {
		totalSize: 0,//总空间
		usedSize: 0,//已用空间
		percent: 0,//已用百分比
	}
	
	componentDidMount(){
		//获取用户空间
		this.getUserSpaceInfo();
	}
	
	getUserSpaceInfo = () => {
		axios.get({
			url: "/User/Operate/getUserSpaceInfo", 
		}).then(res => {
			if(res.code === 0){
				this.setState({
					totalSize: Utils.mertic(res.result.total_size),
					usedSize: Utils.mertic(res.result.used_size),
					percent: ((res.result.used_size / res.result.total_size) * 100).toFixed(1)
				});
			}
		})
	}
	
	render(){
		const path = this.props.location.pathname;
		const style= this.props.collapsed ? {color: "#fcfcfc", opacity: .5} : {};
		const { totalSize, usedSize, percent } = this.state;
		return (
			<div className="navleft-wrap">
				<Menu
					mode="inline"
					defaultSelectedKeys={['/main/lately']}
					selectedKeys={path}
					style={{ height: '100%', borderRight: 0 }}
				>
					<Menu.Item key="/main/lately" icon={<i className="iconfont">&#xe743;</i>}>
						<NavLink to="/main/lately">
							<span style={style}>最 近</span>
						</NavLink>
					</Menu.Item>
					<Menu.Item key="/main/whole" icon={<i className="iconfont">&#xe628;</i>}>
						<NavLink to="/main/whole">
							<span style={style}>全 部</span>
						</NavLink>
					</Menu.Item>
					<Menu.Item key="/main/picture" icon={<i className="iconfont">&#xe618;</i>}>
						<NavLink to="/main/picture">
							<span style={style}>图 片</span>
						</NavLink>
					</Menu.Item>
					<Menu.Item key="/main/video" icon={<i className="iconfont">&#xe634;</i>}>
						<NavLink to="/main/video">
							<span style={style}>视 频</span>
						</NavLink>
					</Menu.Item>
					<Menu.Item key="/main/audio" icon={<i className="iconfont">&#xe602;</i>}>
						<NavLink to="/main/audio">
							<span style={style}>音 乐</span>
						</NavLink>
					</Menu.Item>
					<Menu.Item key="/main/document" icon={<i className="iconfont">&#xe656;</i>}>
						<NavLink to="/main/document">
							<span style={style}>文 档</span>
						</NavLink>
					</Menu.Item>
					<Menu.Item key="/main/other" icon={<i className="iconfont">&#xe66f;</i>}>
						<NavLink to="/main/other">
							<span style={style}>其 它</span>
						</NavLink>
					</Menu.Item>
					<Menu.Item key="/main/share" icon={<i className="iconfont">&#xe620;</i>}>
						<NavLink to="/main/share">
							<span style={style}>分 享</span>
						</NavLink>
					</Menu.Item>
					<Menu.Item key="/main/xsharedir" icon={<i className="iconfont">&#xe623;</i>}>
						<NavLink to="/main/xsharedir">
							<span style={style}>共享群</span>
						</NavLink>
					</Menu.Item>
					<Menu.Item key="/main/recycle" icon={<i className="iconfont">&#xe61a;</i>}>
						<NavLink to="/main/recycle">
							<span style={style}>回收站</span>
						</NavLink>
					</Menu.Item>
				</Menu>
				<div className="size-wrap" >
					{
						this.props.collapsed ? "" :
						<div>
							<Progress
								strokeColor={{
									'0%': percent < 90 ? '#f45656': '',
									'100%': percent < 90 ? '#f45656': '',
								}}
								percent={percent}
								status="active"
							/>
							<Breadcrumb className="tit">
								<Breadcrumb.Item>已用{usedSize}</Breadcrumb.Item>
								<Breadcrumb.Item>{totalSize}</Breadcrumb.Item>
							</Breadcrumb>
						</div>
					}
				</div>
			</div>
		)
	}
}

export default withRouter(Aside);